<template>
  <Row class="main" type="flex" justify="center" align="middle">
    <!--  :model="formCustom"表单的数据队形 -->
    <!-- :rules="ruleCustom"表单的验证规则 -->

    <Form class="login" ref="formCustom" :model="formCustom" :label-width="80">
      <div class="loginbtn">登录</div>
      <!-- 账户框 -->
      <!--  prop="passwdCheck" 对应表单域里面的数据 -->
      <FormItem label="账号" prop="uname">
        <Input type="text" v-model="formCustom.uname"></Input>
        <!-- <AutoComplete type="text" v-model="formCustom.uname" :data="dataArr" @on-search="handleSearch1"></AutoComplete> -->
      </FormItem>
      <FormItem label="密码" prop="upwd">
        <Input type="password" v-model="formCustom.upwd"></Input>
      </FormItem>

      <!--handleSubmit提交的事件  -->
      <!--handleReset 对整个表单进行重置，将所有字段值重置为空并移除校验结果 -->
      <div class="loginitem">
        <Button type="primary" @click="handleSubmit">提交</Button>
        <Button @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
      </div>
      <div class="circle" v-if="isShow">

        <i-Circle  :percent="percent" :stroke-color="color">
          <Icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
          <span v-else style="font-size:24px">{{ percent }}%</span>
        </i-Circle>
      </div>
    </Form>
  </Row>
</template>
<script>
import { setTimeout } from "timers";
export default {
  data() {
    return {
      formCustom: {
        uname: "",
        upwd: ""
      },
      dataArr: [],
      percent: 0,
      isShow:false,
    };
  },
  computed: {
            color () {
                let color = '#2db7f5';
                if (this.percent == 100) {
                    color = '#5cb85c';
                }
                return color;
            }
        },

  methods: {
    handleSearch1(value) {
      this.dataArr = !value
        ? []
        : [value, value + value, value + value + value];
    },

    handleSubmit() {
      

      this.isShow=true;
      // console.log(name)// 那么获取的是formCustom的字段名
      // 发送请求
      this.$Loading.start();
      // 调用axios请求,获取数据，发送请求
      let timeid = setInterval(() => {
        this.percent++;
      }, 100);
      this.$axios({
        url: "/admin/account/login",
        method: "POST",
        data: this.formCustom,
        // 由于在8080端口下去请求8899端口，涉及到了跨域
        withCredentials: true
      }).then(res => {
        // console.log(res)
        const { status, message } = res.data;
        if (!status) {
          this.$Loading.finish();
          this.$Message.success("登录成功");

          // 给store的state赋值
          this.$store.commit("setUser", {
            uname: message.uname,
            realname: message.realname
          });
          this.percent = 100;
          if (this.percent == 100) {
            setTimeout(() => {
              this.$router.push("/admin");
            }, 1000);
          }
          clearInterval(timeid);
        } else {
          setTimeout(() => {
            this.isShow=false;
          }, 500);
          this.$Loading.error();
          this.$Message.error("请输入正确的密码");
          // 清除
          clearInterval(timeid);
        }
      });
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    }
  }
};
</script>
<style scoped>
.main {
  width: 100%;
  position: absolute;

  top: 0;
  bottom: 0;
  /* background-color: #f00; */
}
.login {
  width: 350px;
}
.loginbtn {
  color: #2d8cf0;
  text-align: center;
  line-height: 60px;
  height: 60px;
  font-size: 20px;
}
.loginitem {
  text-align: center;
}
.circle{
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%,-50%);
}

</style>

